<template>
  <view v-if="data.trade">
    <up-cell-group v-if="data.delivery.delivery.value == 1">
      <up-cell title="发货仓" :value="`${data.delivery.store.name}`"></up-cell>
      <up-cell title="退回站点地址">
        <template #value>
          <view style="flex: 1; text-align: right;">{{ data.delivery.deliveryInfo.description }}</view>
        </template>
      </up-cell>
      <!-- <up-cell title="联系方式" :value="data.delivery.phone"></up-cell> -->
    </up-cell-group>
    <up-cell-group v-if="data.delivery.delivery.value == 0">
      <!-- 自提没得售后 -->
       <!-- 提货后订单就完成了 -->
    </up-cell-group>

    <view class="u-border-top">
      <view
        class="u-p-l-20 u-p-r-20 u-p-b-30 u-p-t-30 u-border-bottom"
        v-for="(item, index) in data.goods" :key="index"
      >
        <goods-item
          type="horizontal"
          :data="item"
          size="84px"
        ></goods-item>
      </view>
    </view>

    <view class="p-10 p-t-0" style="line-height: 2;">
      <view class="flex-block" style="justify-content: space-between;">
        <view class="u-tips-color">商品数量:</view>
        <view>{{ data.trade.quantity }}</view>
      </view>
      <view class="flex-block" style="justify-content: space-between;">
        <view class="u-tips-color">总金额:</view>
        <view>¥{{ data.trade.totalPrice }}</view>
      </view>
    </view>

    <view class="u-p-l-20 u-p-r-20 u-border-top">
      <up-form ref="formRef" :rules="rules" labelWidth="100px" :model="formData">
        <up-form-item label="售后类型" prop="type" class="u-border-bottom">
          <view @click="chooseType()" v-if="formData.type">
            <text>{{ formData.type == 10 ? '退货' : '换货' }}</text>
          </view>
          <view @click="chooseType()" class="u-tips-color" v-else>请选择售后类别</view>
          <template #right>
            <up-icon
                name="arrow-right"
            ></up-icon>
          </template>
        </up-form-item>
        <up-form-item label="售后原因" prop="reason" class="u-border-bottom">
          <up-textarea
            v-model="formData.reason"
            placeholder="请输入售后原因"
            showLimit
            border="none"
          ></up-textarea>
        </up-form-item>
        <!-- <up-form-item label="物流单号" prop="expressNo" class="u-border-bottom">
          <up-input
              v-model="formData.expressNo"
              disabledColor="#ffffff"
              placeholder="请输入物流单号"
              border="none"
              type="digit"
          ></up-input>
        </up-form-item> -->
        <up-form-item label="上传图片" prop="photos" class="u-border-bottom">
          <up-upload
            :fileList="fileList1"
            @afterRead="afterRead"
            @delete="deletePic"
            name="1"
            multiple
            :maxCount="6"
          ></up-upload>
        </up-form-item>
      </up-form>
    </view>
  </view>
</template>

<script>
// #ifndef H5
import { cos } from '@/utils/cos.js'
// #endif
export default {
  props: ['data', 'tradeId'],
  data() {
    return {
      fileList1: [],
      formData: {
        type: '',
        reason: '',
        // expressNo: '',
        photos: []
      },
      rules: {
        patType: [
					{
						required: true,
						message: '请选择售后方式',
						trigger: ['blur', 'change']
					}
				],
        reason: [
					{
						required: true,
						message: '请选择售后原因',
						trigger: ['blur', 'change']
					}
				]
      }
    }
  },
  watch: {
    fileList1: {
      handler(val) {
        this.formData.photos = val.map(item => item.url)
      },
      deep: true
    }
  },
  mounted() {
    console.log('cos', cos)
  },
  methods: {
    async chooseType() {
      uni.showActionSheet({
        itemList: ['退货', '换货'],
        success: (res) => {
          console.log(res)
          if (res.tapIndex == 0) {
            this.formData.type = 10
          } else {
            this.formData.type = 20
          }
        }
      })
    },
    // 删除图片
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1)
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file)
      let fileListLen = this[`fileList${event.name}`].length
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: 'uploading',
          message: '上传中'
        })
      })
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i])
        let item = this[`fileList${event.name}`][fileListLen]
        this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
          status: 'success',
          message: '',
          url: result
        }))
        fileListLen++
      }
    },
    uploadFilePromise(file) {
      return new Promise((resolve, reject) => {
        cos.uploadFile({
          Bucket: 'cloudmall-1258631430', // 填入您自己的存储桶，必须字段
          Region: 'ap-chengdu',  // 存储桶所在地域，例如ap-beijing，必须字段
          Key: 'miniprogram/afterSale/' + 'tempImg_' + +new Date(),  // 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段
          FilePath: file.url, // 必须，上传文件对象，可以是input[type="file"]标签选择本地文件后得到的file对象
          SliceSize: 1024 * 1024 * 5,     // 触发分块上传的阈值，超过5MB使用分块上传，非必须
          onTaskReady: function(taskId) {  // 非必须
              console.log(taskId);
          },
          onProgress: function (progressData) { // 非必须
              console.log(JSON.stringify(progressData));
          },
          // 支持自定义headers 非必须
          Headers: {
            'x-cos-meta-test': 123
          },
        }, function(err, data) {
          if (err) {
            console.log('上传失败', err);
          } else {
            console.log('上传成功', data);
            let newUrl = data.Location.replace('cloudmall-1258631430.cos.ap-chengdu.myqcloud.com/', 'https://mall-image.linkland.cc/')
            
            resolve(newUrl)
          }
        });
      })
    }
  },
}
</script>

<style lang="scss" scoped>

</style>